<script type="text/x-template" id="cc-virtual-panel-group-tpl">
    <div class="cc-virtual-panel-group">
        <template v-if="panel.panelList">
            <template v-if="panel.parentType === 'group'">
                <el-tabs
                        type="card"
                        :value="active + ''"
                        @input="$emit('activate', $event)"
                >
                    <el-tab-pane
                            v-for="(item, index) in panel.panelList"
                            :key="index"
                            :name="index + ''"
                    >
                        <span slot="label">{{ item.type }}</span>
                        <cc-virtual-panel
                                :blocks="item"
                        >
                        </cc-virtual-panel>
                    </el-tab-pane>
                </el-tabs>
            </template>
            <cc-virtual-panel
                    v-else
                    :blocks="panel.panelList[0]"
            >
            </cc-virtual-panel>
        </template>
        <el-form  label-width="170px">
            <el-form-item label="统一设置子包名" >
                <el-input v-model.trim="subPackage" @change="handleSubPackageChange" placeholder="请输入子包名"></el-input>
            </el-form-item>
            <el-form-item label="是否开启全部" >
                <el-switch
                        v-model="isEnableAll"
                        @change="handleToggleSwitch"
                        active-color="#13ce66"
                        inactive-color="#ff4949">
                </el-switch>
            </el-form-item>
        </el-form>
</script>


<script>
    Vue.component('cc-virtual-panel-group', {
        template: '#cc-virtual-panel-group-tpl',
        data() {
            return {
                subPackage:undefined,
                isEnableAll: false
            }
        },
        props: ['panel', 'active'],
        methods: {
            handleToggleSwitch(){
                var disable = this.isEnableAll ? 0 : 1
                this.panel.panelList.map(item =>{ item.disable=disable})

            },
            handleSubPackageChange(){
                this.panel.panelList.map(item =>{ item.subPackageName=this.subPackage})
            }
        }
    })
</script>
<style>
    .cc-virtual-panel-group .el-tab-pane {
        overflow-x: auto;
    }
</style>